<h1 mat-dialog-title>{{ 'USER.PASSWORDLESS.DIALOG.ADD_TITLE' | translate }}</h1>
<div mat-dialog-content>
  <div *ngIf="!showSent && !showQR">
    <p>{{ 'USER.PASSWORDLESS.DIALOG.ADD_DESCRIPTION' | translate }}</p>

    <div class="passwordless-desc">
      <i class="icon las la-plus-circle"></i>
      <p class="cnsl-secondary-text">{{ 'USER.PASSWORDLESS.DIALOG.NEW_DESCRIPTION' | translate }}</p>
    </div>

    <cnsl-form-field class="form-field" label="Name" required="true">
      <cnsl-label>{{ 'USER.MFA.U2F_NAME' | translate }}</cnsl-label>
      <input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
    </cnsl-form-field>

    <button [disabled]="!name" mat-raised-button class="ok-button" color="primary" (click)="closeDialogWithCode()">
      {{ 'USER.PASSWORDLESS.DIALOG.NEW' | translate }}
    </button>

    <p class="error">{{ error }}</p>

    <div class="passwordless-desc">
      <i class="icon las la-paper-plane"></i>
      <p class="cnsl-secondary-text">{{ 'USER.PASSWORDLESS.DIALOG.SEND_DESCRIPTION' | translate }}</p>
    </div>

    <button mat-raised-button class="send-button" color="primary" (click)="sendMyPasswordlessLink()">
      {{ 'USER.PASSWORDLESS.DIALOG.SEND' | translate }}
    </button>

    <div class="passwordless-desc">
      <i class="icon las la-qrcode"></i>
      <p class="cnsl-secondary-text">{{ 'USER.PASSWORDLESS.DIALOG.QRCODE_DESCRIPTION' | translate }}</p>
    </div>

    <button mat-raised-button class="qr-button" color="primary" (click)="addMyPasswordlessLink()">
      {{ 'USER.PASSWORDLESS.DIALOG.QRCODE' | translate }}
    </button>
  </div>

  <div *ngIf="showSent">
    <button mat-icon-button (click)="showSent = false">
      <i class="las la-arrow-left"></i>
    </button>
    <p>{{ 'USER.PASSWORDLESS.DIALOG.SENT' | translate }}</p>
  </div>

  <div *ngIf="showQR">
    <button mat-icon-button (click)="showQR = false">
      <i class="las la-arrow-left"></i>
    </button>
    <p>{{ 'USER.PASSWORDLESS.DIALOG.QRCODE_SCAN' | translate }}</p>

    <div class="qrcode-wrapper">
      <qrcode
        *ngIf="qrcodeLink"
        class="qrcode"
        qrcode
        [qrdata]="qrcodeLink"
        [width]="150"
        [errorCorrectionLevel]="'M'"
      ></qrcode>
    </div>
  </div>

  <mat-spinner diameter="30" *ngIf="loading"></mat-spinner>
</div>
<div mat-dialog-actions class="action">
  <button mat-stroked-button (click)="closeDialog()">{{ 'ACTIONS.CLOSE' | translate }}</button>
</div>
